<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>湿地总体规划（生境破碎化）评价系统</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
    <img src="./assets/icon1.jpg" alt="">
    <h2>湿地总体规划（生境破碎化）评价系统</h2>
</div>

<!--上传tif文件-->
<div class="upload chunk">
    <div class="title">
        <span></span>
        <h5>上传图层文件</h5>
    </div>
    <div class="uploadstyle">

        <a href="javascript:;">
            选择图层文件
        </a>
        <a href="javascript:;" onclick="up()">
            开始上传
        </a>
        <input type="file" id="file">

        <div class="txt1"><h5></h5><span></span></div>
        <div class="txt2"><h5></h5><span></span></div>
    </div>
</div>

<!--添加字段-->
<div class="addfields chunk">
    <div class="title">
        <span></span>
        <h5>定义分类结果</h5>
    </div>
    <div class="explain">
        <span style="color: red">*</span><h6>所填数字必须对应类型（1-100）</h6>
    </div>
    <ul class="flist">
        <li>
            <span>编号:</span> <input type="number" class="deal">
            <span>类型:</span> <input type="text" class="deal">
            <div class="close">
            </div>
        </li>
    </ul>
    <div class="addf">
        <span onclick="add()" style="margin-left: 285px;">
            添加字段
        </span>
        <span onclick="create()" style="background-color: #2F3241;">
            确认添加
        </span>
    </div>
</div>

<!--添加栅格大小-->
<div class="addfields chunk">
    <div class="title">
        <span></span>
        <h5>添加栅格大小</h5>
    </div>
    <div class="explain">
        <span style="color: red">*</span><h6>单位为m，最好都转化为m，因为统计均以此为基本单位</h6>
    </div>
    <ul class="grid">
        <li>
            <span>数据类型:</span> <input value="栅格" readonly="readonly" class="deal">
            <span>栅格大小:</span> <input type="number" class="deal" id="size">
        </li>
    </ul>
    <div class="addf">
        <span style="margin-left: 370px;background-color: #2F3241;" onclick="createsize()">
            确认添加
        </span>
    </div>
</div>

<!--调用程序-->
<div class="operation chunk">
    <span onclick="go()">生成结果</span>
</div>

<!--初始化文件-->
<div class="initialize">
    <div class="logo">
        <img src="./assets/icon.jpg" alt="">
    </div>
    <div class="intro">
        <h1>欢迎使用生境破碎化评价系统</h1>
        <h5 style="color: #ff2850">(↓首次使用请先初始化系统↓)</h5>
    </div>

    <div class="start">
        <span onclick="start()">初始化程序</span>
    </div>
</div>
<!--加载中-->
<div class="load">
    <img src="./assets/loading.gif" alt="">
</div>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="./config/configuration.js"></script>
<script src="js/index.js"></script>
</body>
</html>